import React, { useState, useEffect, useImperativeHandle } from "react";
import { Input, Select, Form, Dialog } from "@alifd/next";
import styles from "./index.module.scss";
import http from '../../../../utils/request';
import { Message } from '@alifd/next';

// FormBinder 用于获取表单组件的数据，通过标准受控 API value 和 onChange 来双向操作数据
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xxs: "6",
    s: "5",
    l: "5"
  },
  wrapperCol: {
    s: "12",
    l: "10"
  }
};

export default function Index({
  refs,
  ...props
}) {
  const [value, setValue] = useState({
    type: "single",
    title: '',
    A: '',
    B: '',
    C: '',
    D: ''
  });
  const [visible] = useState(true);
  const [status, setStatus] = useState('');
  const [editId, setEditId] = useState('');
  const onFormChange = value => {
    setValue(value);
  };
  useImperativeHandle(refs, () => (
    {
      clearData: () => {
        initData();
        setEditId('');
      }
    }
  ))
  // 初始化加载方法
  useEffect(() => {
    if (props.editInfo) {
      const data = props.editInfo;
      setEditId(props.editInfo);
      setValue({
        type: data.type,
        title: data.title,
        A: data.list.A,
        B: data.list.B,
        C: data.list.C,
        D: data.list.D,
      });
    }
  }, []);
  // 点击确定按钮
  const onOpen = () => {
    const url = 'add-item';
    const data = {
      title: value.title,
      type: value.type,
      list: {
        A: value.A,
        B: value.B,
        C: value.C,
        D: value.D
      }
    };
    // 编辑
    if (editId) {
      data._id = editId._id;
      data.create_time = editId.create_time;
    }
    http.post(url, data).then((res) => {
      props.submit();
      if (res && res.data.data.title) {
        if (editId) {
          showMessage('修改成功');
          onClose();
        } else {
          showMessage('添加成功');
        }
        initData();
      } else {
        const value = '添加';
        if (editId) {
          value = '修改';
        }
        Message.error({ title: `${value}失败!`, duration: 1500 })
      }
    })
  };
  const initData = () => {
    setValue({
      type: "single",
      title: '',
      A: '',
      B: '',
      C: '',
      D: ''
    })
  }
  // 弹出框
  const showMessage = (title) => {
    Message.success({ title, duration: 1500 })
  }
  // 关闭弹窗
  const onClose = () => {
    props.onClose();
  };
  // 选中的值
  const SelectChange = (value) => {
    if (value === 'answer') {
      setStatus(value);
    } else {
      setStatus(value);
    }
  };

  // const submit = (value, error) => {
  //   console.log("error", error, "value", value);
  //   if (error) {
  //      处理表单报错
  //   }
  //    提交当前填写的数据
  // };

  return (<Dialog title={editId ? '修改' : '添加'} visible={visible} onOk={() => onOpen()} onCancel={() => onClose("取消")} onClose={() => onClose("关闭")}>
    <div className="create-activity-form">
      <Form style={{
        width: '600px'
      }} fullWidth="fullWidth" value={value} onChange={onFormChange} onSubmit={onOpen}>
        <FormItem {...formItemLayout} label="类型">
          <Select name="type" onChange={SelectChange} dataSource={[
            {
              label: "单选题",
              value: "single"
            }, {
              label: "多选题",
              value: "multi"
            }, {
              label: "解答题",
              value: "answer"
            }
          ]} />
        </FormItem>

        <FormItem {...formItemLayout} label="题目：" required="required" requiredMessage="请输入题目">
          <Input.TextArea rows={10} name="title" className={styles.inputWidth} placeholder="请输入题目信息" />
        </FormItem>
        {
          status !== 'answer'
            ? <div>
              <FormItem {...formItemLayout} label="A :">
                <Input.TextArea name="A" className={styles.inputWidth} placeholder="答案A" />
              </FormItem>
              <FormItem {...formItemLayout} label="B :">
                <Input.TextArea name="B" className={styles.inputWidth} placeholder="答案B" />
              </FormItem>
              <FormItem {...formItemLayout} label="C :">
                <Input.TextArea name="C" className={styles.inputWidth} placeholder="答案C" />
              </FormItem>
              <FormItem {...formItemLayout} label="D :">
                <Input.TextArea name="D" className={styles.inputWidth} placeholder="答案D" />
              </FormItem>
            </div>
            : null
        }

        {/* <FormItem {...formItemLayout} label=" ">
              <Form.Submit type="primary" validate onClick={props.submit}>
                立即创建
              </Form.Submit>
              <Form.Reset className={styles.resetBtn} onClick={reset}>
                重置
              </Form.Reset>
            </FormItem> */
        }
      </Form>
    </div>
  </Dialog >);
}
